<template>
	<view class="share_poster">
		<!-- <image @click="showShare"
			src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/8d05c3038f754808a94151616ccbdb17.png"
			mode="aspectFit" class="inviteBtn"></image> -->
		<view>
			<view style="width: 600rpx;height: 1000rxpx;;background-color: #f9ead8;text-align: center;margin: 0 auto;">
				<canvas style="width: 600rpx; height:1000rpx;background-color: #f9ead8" canvas-id="firstCanvas"
					id="firstCanvas"></canvas>
			</view>
			<view class="hb_bottom">
				<view class="saveBox" @click="saveImg">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/f66e3820420e4c7492403559acaa8309.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>保存图片</text>
				</view>
				<view class="saveBox" @click="copyCode">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/15dcca9254ed4d8bbadeba45c3a017b5.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>复制链接</text>
				</view>
			</view>
		</view>


		<view class="erweimaCode" v-if="isShowShareCodeSta">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value=this.appCopyLinks size='200' :options="{  margin:10,
						foreground: {
						    image: {
						      src: 'https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/7eabf2bf01de40f2bc565009f814e656.png',
						      width: 40,
						      height: 40,
						      align: ['center', 'center'],
						      anchor: [0, 0]
						    }
							}
							}" @complete=" complete($event)"></uqrcode>
		</view>
	</view>
</template>

<script>
	import QRCode from 'qrcode'
	import {
		getUserId
	} from '@/utils';
	import uqrcode from "../Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	export default {
		name: '',
		props: {},
		data() {
			return {
				ewmCode: '',
				aaas: false,
				timer: null,
				price: '88.88', //商品砍价还剩余价格
				imgs: '', //商品图片
				prizeId: '', //商品id
				prizeUid: '', //发起人的uid
				appCopyLinks: '',
				isShowShareCodeSta: false, //分享的二维码是否开始加载
			};
		},
		components: {
			uqrcode
		},

		onLoad(e) {
			this.isShowShareCodeSta=false
			this.appCopyLinks=''
			this.ewmCode=''
			console.log('--app踢脚分享页面==', e);
			this.price = e.price
			this.imgs = e.imgs
			this.prizeId = e.prizeId
			this.prizeUid = getUserId()
			// this.ewmCode = uni.getStorageSync('shareCode') || ''
			this.appCopyLinks =
				`https://run.nbqlkj.com/#/pagesInfo/cutShareApp/cutShareApp?prizeId=${this.prizeId}&prizeUid=${this.prizeUid}&imgs=${this.imgs}&price=${this.price}`
			if(this.appCopyLinks){
				uni.showLoading({
					title: "海报生成中"
				})
				this.isShowShareCodeSta = true
				// this.getShareCodeImg()
			}
		},
		onUnload() {},
		watch:{
		    ewmCode(newValue,oldValue){
		        console.log("----二维码isHot:newValue----"+newValue,"--二维码oldValue="+oldValue);
		    }
		},
		methods: {
			//自动获取分享链接二维码
			getShareCodeImg() {
				this.timer = setTimeout(() => {
					uni.hideLoading()
					this.showShare()
					clearTimeout(this.timer);
					this.timer = null
				}, 200); // 延迟0.5秒
			},
			complete(e) {
				if (e.success == true) {
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							console.log('要转成二维码的链接有变化吗',this.appCopyLinks);
							console.log('组件模式二维码转为图片路径', res);
							this.ewmCode = res.tempFilePath
							// uni.setStorage({
							// 	key: 'shareCode',
							// 	data: res.tempFilePath
							// });
							// this.getShareCodeImg()
							this.showShare()
							this.$qrCodeResolve()
						}
					});
				}
			},
			async showShare() {
				uni.showLoading({
					title: "海报生成中"
				})
				// await this.$qrCoded
				var context = uni.createCanvasContext('firstCanvas')
				// let bigImg = await this.urlToFile(
				// 	'https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/563b875942c544e3b841f2f61699ee45.png')
				// context.drawImage(bigImg, this.rpxToPx(20), this.rpxToPx(20), this.rpxToPx(570), this.rpxToPx(740))
				context.drawImage(this.imgs,
					this.rpxToPx(60), this.rpxToPx(100), this.rpxToPx(480), this.rpxToPx(460))
				context.drawImage(this.ewmCode, this.rpxToPx(350), this.rpxToPx(690), this.rpxToPx(220), this.rpxToPx(
					220))
				context.drawImage('../../static/shareImg1.png', this.rpxToPx(0), this.rpxToPx(0), this.rpxToPx(90),
					this
					.rpxToPx(90))

				context.setFontSize(14)
				context.setFillStyle('#ca9e64')
				context.fillText('还差' + this.price + '元即可踢脚成功,', this.rpxToPx(120), this.rpxToPx(610));

				context.setFontSize(14)
				context.setFillStyle('#ca9e64')
				context.fillText('就差你的临门一脚了!', this.rpxToPx(180), this.rpxToPx(660));

				context.setFontSize(16)
				context.setFillStyle('#8f7046')
				context.fillText(this.$appNameDict[this.$appName], this.rpxToPx(50), this.rpxToPx(750));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText('心动不如行动，年轻人', this.rpxToPx(50), this.rpxToPx(790));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText('都在使用，购物就来', this.rpxToPx(50), this.rpxToPx(830));

				context.setFontSize(13)
				context.setFillStyle('#a4a4a4')
				context.fillText(this.$appNameDict[this.$appName] + '!', this.rpxToPx(50), this.rpxToPx(870));

				context.setFontSize(12)
				context.setFillStyle('#a4a4a4')
				context.fillText('分享好友微信扫描二维码', this.rpxToPx(170), this.rpxToPx(950));

				context.stroke()
				uni.hideLoading()
				context.draw()
			},
			urlToFile(url) {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: url,
						success(res) {
							resolve(res.path)
							console.log('下载的图片', res);
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '网络异常',
								duration: 2000,
								icon: 'none'
							})
						}
					})
				})
			},
			rpxToPx(rpx) {
				return (rpx / 750) * uni.getSystemInfoSync().windowWidth
			},
			//点击保存图片
			saveImg() {
				let this_ = this
				uni.canvasToTempFilePath({
					// x: 0,
					// y: 0,
					// width: 317,
					// height: 520,
					// destWidth: 180,
					// destHeight: 180,
					quality: 1,
					canvasId: 'firstCanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log('生成的图片路径tempFilePath==', res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								console.log('app保存图片', res);
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
							},
							fail: () => {
								uni.showToast({
									title: '相册功能未授权',
									icon: 'none'
								})
							},
						})
					}
				})
			},
			copyCode() {
				// this.$onTo(
				// 	`pagesInfo/cutShareApp/cutShareApp?prizeId=${this.prizeId}&prizeUid=${this.prizeUid}&imgs=${this.imgs}&price=${this.price}`
				// 	)
				uni.setClipboardData({
					data: this.appCopyLinks,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						})
					},
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.erweimaCode {
		background-color: red;
		opacity: 0;

	}

	.share_poster {
		overflow: hidden;
		padding-top: 100rpx;

		.inviteBtn {
			width: 100%;
			height: 110rpx;
		}

		.hb_bottom {
			display: flex;
			justify-content: space-evenly;
			margin-top: 20rpx;
			overflow: hidden;

			.saveBox {
				display: flex;
				align-items: center;

				text {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>